<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>设备资料库</title>
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <link href="../../../../css/mui.min.css" rel="stylesheet" />
    <link href="../../css/common.css" rel="stylesheet" />
    <link href="../../css/helper.css" rel="stylesheet" />
    <style>
      .mui-table-view-cell {
        padding: 0 0;
      }

      .list-item {
        height: 67px;
        border-radius: 3px;
        margin-bottom: 13px;
        background-color: #ffffff;
        padding-left: 16px;
        padding-right: 13px;
      }

      .card-img-box {
        /* margin-right:16px; */
        height: inherit;
        width: 33px;
      }

      .card-img {
        width: 33px;
        height: 33px;
      }

      .card-content-box {
        padding: 0 16px;
        width: 70%;
      }

      .txt1 {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      .txt2 {
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #999999;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .img-tool-box {
        /* height:inherit; */
        width: 60px;
        /* flex: 1; */
      }
      .img-tool-box .imgs {
        display: inline-block;
        width: 20px;
        height: 20px;
      }
      .img-tool {
        width: 19px;
        height: 19px;
        /* margin-top:10px; */
      }

      .img-19 {
        width: 19px;
        height: 19px;
      }

      .mui-table-view {
        margin-top: 44px;
        background-color: inherit;
        padding-left: 13px;
        padding-right: 13px;
        padding-top: 13px;
      }

      .mui-table-view-cell:after {
        background-color: transparent;
      }

      .nav-title {
        height: inherit;
        line-height: 42px;
      }
      .texts {
        text-align: right;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    </style>
  </head>

  <body>
    <div id="container" v-cloak>
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">设备资料库</h1>
        <div class="img-tool-boxs">
          <img
            src="../../img/sousuo.png"
            class="img-tool fr"
            style="margin-left: 13px; margin-top: 10px"
            @click="search"
          />
        </div>
      </header>
      <div class="mui-content">
        <!-- 1、slider items -->
        <div
          class="mui-bar mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary"
        >
          <div class="mui-navigate-right nav-title" @click="device">
            {{areaName}} - {{stationName}}
          </div>
        </div>
        <div id="slider" class="mui-slider mui-fullscreen">
          <div class="tab-content mui-slider-group" id="tab-content">
            <div
              id="item1"
              class="mui-slider-item mui-control-content mui-active"
            >
              <div id="scroll" class="regular-scroll mui-scroll-wrapper">
                <div class="mui-scroll">
                  <!-- 2、列表 -->
                  <ul class="mui-table-view" id="tableitem">
                    <li
                      class="mui-table-view-cell mui-media list-item f-r-b-c"
                      v-for="(item,index) in deviceList"
                      :key="item.id"
                      @tap="detail(item)"
                    >
                      <div class="card-img-box f-r-c-c">
                        <img src="../../img/wenjian.png" class="card-img" />
                      </div>
                      <div class="card-content-box fs">
                        <div class="txt1">{{item.t}}</div>
                        <div class="txt2">{{item.fn}}</div>
                      </div>
                      <div class="img-tool-box">
                        <div class="texts">{{item.cn}}</div>
                        <span class="imgs" @tap.stop="downlonds(item)">
                          <img src="../../img/xiazai.png" class="img-tool fr" v-if="item.isDown">
                          <img src="../../img/xiazai1.png" class="img-tool fr" v-else>
                        </span>
                        <span class="imgs fr" v-if="item.ic" @tap.stop="addStore(item)">
                          <img
                            src="../../img/shoucang_yishoucang.png"
                            class="img-tool fr"
                            style="margin-left: 13px"
                        /></span>
                        <span
                          class="imgs fr"
                          v-else
                          @tap.stop="addStore(item)"
                          ><img
                            src="../../img/shoucang_moren.png"
                            class="img-tool fr"
                            style="margin-left: 13px"
                        /></span>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="../../../../js/mui.js"></script>
    <script src="../../../../js/mui.pullToRefresh.js"></script>
    <script src="../../../../js/mui.pullToRefresh.material.js"></script>
    <!-- <script src="../../../../js/jquery-1.7.2.min.js"></script> -->
    <script
      type="text/javascript"
      src="../../../../js/jquery-3.2.1.min.js"
    ></script>
    <script src="../../../../js/vue.js"></script>
    <script src="../../js/mkeyplus.base.js"></script>
    <script src="../../js/sqlite.js"></script>
    <script type="text/javascript">
      mui.init()
      if (window.plus) {
        plusready()
      } else {
        document.addEventListener("plusready", plusready, false)
      }

      function plusready() {
        mui.DB.openSqlite()
        var self = plus.webview.currentWebview()
        console.log(self.ids)
        vm.areaId = self.areaId || ''
        vm.stationId = self.stationId || ''
        vm.areaName = self.areaName || ''
        vm.stationName = self.stationName || ''
        vm.getSystemList()
      }
      let vm = new Vue({
        el: "#container",
        data: {
          areaId: "",
          stationId: "",
          areaName: "",
          stationName: "",
          form: {
            page: 1,
            size: 20,
            system: "APP",
            status: 1,
          },
          deviceList: [],
          downDevice: {},
          downList: [],
          baseUrl: mui.baseApp.serverUrl,
        },
        created: function () {
          // let downs=localStorage.getItem("downDevice")
          // if(downs){
          //   this.downDevice=JSON.parse(downs)
          // }
        },
        methods: {
          getSystemList() {
            // this.ids=id;
            if (this.form.page === 1) {
              plus.nativeUI.showWaiting('加载中...');
            }
            mui.baseApp.httpRequst(
              "get",
              "/app/api/knowledge/equipment",
              {
                page: this.form.page,
                size: this.form.size,
                areaId: this.areaId,
                areaName: this.areaName,
                stationId: this.stationId,
                stationName: this.stationName,
                // classifyCode:id,
              },
              (data) => {
                console.log("www", data)
                plus.nativeUI.closeWaiting();
                if (this.form.page == 1) {
                  this.deviceList = []
                }
                this.isDwon(data)
                if (data.records.length < this.form.size) {
                  //
                  mui("#item1 .mui-scroll")
                    .pullToRefresh()
                    .endPullUpToRefresh(true) //参数为true代表没有更多数据了。
                  return
                } else {
                  mui("#item1 .mui-scroll")
                    .pullToRefresh()
                    .endPullUpToRefresh(false) //参数为true代表没有更多数据了。
                  mui("#item1 .mui-scroll").pullToRefresh().refresh(true) //启用上拉加载
                }
              },
              function () {
                plus.nativeUI.closeWaiting()
                console.log("获取数据失败")
              }
            )
          },
          async isDwon(data) {
            let promiseAll = []
            data.records.forEach(item => {
              let tech = [{
                key: "id",
                value: item.id,
              }]
              console.log("设备资料库", tech)
              promiseAll.push(mui.DB.selectTableData("dataDevice", tech)
                .then((res) => {
                  if(res.length) {
                    item.isDown = true
                  } else {
                    item.isDown = false
                  }
                  console.log(item.isDown)
                })
                .catch((error) => {
                  item.isDown = false
                  console.log(error)
                }))
            })
            await Promise.all(promiseAll)
            console.log("333")
            this.deviceList = this.deviceList.concat(data.records)
          },
          downlonds(item) {
            console.log("123", item)
            this.getDetils(item)
          },
          async getDetils(item) {
            let than = this
            let ids = item.id
            plus.nativeUI.showWaiting('下载中');
            let detas = null
            await mui.baseApp.httpRequst(
              "get",
              "/app/api/knowledge/equipment/detail/" + ids,
              {},
              function (data) {
                console.log("12qq", data.data)
                let itms = data.data
                // than.detils=itms
                detas = {
                  id: itms.id,
                  areaId: itms.areaId || "",
                  areaName: itms.areaName || "",
                  deviceModelId: itms.deviceModelId || "",
                  deviceModelIds: itms.deviceModelIds || "",
                  deviceModelName: itms.deviceModelName || "",
                  machineModel: itms.machineModel || "",
                  functionalLocation: itms.functionalLocation || "",
                  title: itms.title || "",
                  fileId: itms.fileId || "",
                  fileAddres: itms.fileAddres || "",
                  createId: itms.createId || "",
                  createName: itms.createName || "",
                  createTime: itms.createTime || "",
                  deleted: itms.deleted || "",
                  isCollection: itms.isCollection || "",
                  dm: item.dm || "",
                  t: item.t || "",
                  fn: item.fn || "",
                  cn: item.cn || "",
                }
              },
              function () {
                plus.nativeUI.closeWaiting()
                console.log("获取数据失败1")
              }
            );
            if(!detas) {
              return
            }
            
            if(!detas.fileId) {
              this.downCall(item, detas);
              return
            }
            let filePath = 'knowledge/device/' + detas.fileId + '/' + detas.title
            await mui.baseApp.download(
                vm.baseUrl + detas.fileAddres, 
                filePath,
                function (res) {
                  console.log(res)
                  detas.fileAddres = res.filename
                },
                function () {
                  plus.nativeUI.closeWaiting();
                }
              );
              this.downCall(item, detas)
          },
          downCall(item, detas) {
            mui.DB.createFormat("dataDevice", detas, "id")
            mui.DB.insertOrReplace("dataDevice", detas)
            console.log("detas", detas)
            plus.nativeUI.closeWaiting();
            item.isDown = true
            mui.toast("操作成功");
          },
          setObj(arr) {
            console.log("arr", arr)
            let newArr = []
            let obj = {}
            for (var i = 0; i < arr.length; i++) {
              if (!obj[arr[i].id]) {
                newArr.push(arr[i])
                obj[arr[i].id] = true
              }
            }
            return newArr
          },
          addStore(item) {
            mui.baseApp.httpRequst(
              "post",
              "/app/api/knowledge/collection/add",
              {
                tagetId: item.id,
                type: 2,
              },
              function (data) {
                item.ic = !item.ic
                mui.toast("操作成功")
              }
            )
          },
          detail(item) {
            mui.baseApp.openWindow("./detail.html", {
              ids: item.id,
            })
          },
          search() {
            mui.baseApp.openWindow("../../common/search.html", {
              type: 2,
            })
          },
          device() {
            mui.baseApp.openWindow("../../common/device.html", {
              code: 1,
            })
          },
        },
      })
      ;(function ($) {
        //阻尼系数
        var deceleration = mui.os.ios ? 0.003 : 0.0009
        $(".mui-scroll-wrapper").scroll({
          bounce: false,
          indicators: true, //是否显示滚动条
          deceleration: deceleration,
        })
        $.ready(function () {
          $(".mui-scroll").pullToRefresh({
            down: {
              callback: function () {
                var self = this
                setTimeout(function () {
                  vm.form.page = 1
                  vm.getSystemList()
                  self.endPullDownToRefresh()
                }, 1000)
              },
            },
            up: {
              callback: function () {
                var self = this
                setTimeout(function () {
                  vm.form.page++
                  vm.getSystemList()
                  self.endPullUpToRefresh()
                }, 1000)
              },
            },
          })

          mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(true)
          // mui("#item2 .mui-scroll").pullToRefresh().endPullUpToRefresh(true);
        })
      })(mui); 
      
      window.addEventListener('searchArea', function(event) {
        let data = event.detail
        vm.areaId = data.areaId || ''
        vm.stationId = data.stationId || ''
        vm.areaName = data.areaName || ''
        vm.stationName = data.stationName || ''
        vm.form.page = 1
        vm.getSystemList()
      });
      
      window.addEventListener('collection', function(event) {
        let data = event.detail
        for(let i = 0; i < vm.deviceList.length; i++) {
          let item = vm.deviceList[i]
          if(item.id == data.id) {
            if(data.isDown != undefined) {
              item.isDown = data.isDown
            }
            if(data.isCollection != undefined) {
              item.ic = data.isCollection
            }
            break
          }
        }
      });
    </script>
  </body>
</html>
